<template>
  <div>
    <icard title="报表">
      <div slot="search">
        <iSearch :list='filterList'
        :boxWidth="660" :inputWidth="165"
        reset ep
        @setQuery="searchList"
        @exportExcel="exportExcel"
        ></iSearch>
      </div>
      <div slot="content">
        <div class="num-total">
          领取总数： {{numTotal}}
        </div>
          <el-table
            :data="tableData"
            stripe
            ref= "table"
            highlight-current-row
            header-row-class-name="table-header"
            style="width: 100%; border: 1px solid #d3dce6" :height="tableHeight" v-loading="loading">
            <el-table-column prop="sMachineNo" label="机器编号" align="center"></el-table-column>
            <el-table-column prop="sMachineId" label="机器编码" align="center"></el-table-column>
            <el-table-column prop="sAddress" label="机器地址" align="center"></el-table-column>
            <el-table-column prop="iNumber" label="领取数量" align="center"></el-table-column>
            <el-table-column v-if="auth" prop="iUseNumber" label="实际领取数量" align="center">
              <template slot-scope="scope">
                {{scope.row.iUseNumber === 0 ? '未领取' : scope.row.iUseNumber}}
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="i-page">
            <el-pagination style="margin: 0 50px" background
              @current-change="getList"
              @size-change="sizeChange"
              :current-page.sync="page"
              :page-size="pageSize"
              layout="sizes, total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
      </div>
    </icard>
  </div>
</template>
<script>
import icard from '../../components/icard'
import iSearch from '../../components/iSearch.vue'
import { _reportList, _reportListA, getFile } from '../../api/api'
export default {
  data () {
    return {
      loading: false,
      page: 1, // 当前页
      pageSize: 20, // 一页显示多少条
      total: 30, // 总条数
      numTotal: 0,
      filterList: [ // 索引框数据
        {
          type: 'dateTiem',
          name: 'time',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          startName: 'startTiem',
          endName: 'endTime'
        }
      ],
      tableData: [],
      startTiem: '',
      endTime: ''
    }
  },
  created () {
  },
  mounted () {
    this.getList()
  },
  computed: {
    tableHeight () {
      return this.$store.getters.tableHeight - 245
    },
    auth () {
      return parseInt(window.sessionStorage.getItem('auth'))
    }
  },
  methods: {
    // 获取表格数据
    async getList () {
      if (this.loading) return // 防抖操作
      this.loading = true
      const listData = {
        page: this.page,
        rows: this.pageSize,
        sStartDate: this.startTiem,
        sEndDate: this.endTime
      }
      let res
      if (this.auth) {
        res = await _reportListA(listData)
      } else {
        res = await _reportList(listData)
      }
      if (res.success) {
        const list = res.data.rows
        this.total = res.data.total
        this.tableData = list
        this.numTotal = list.reduce((pre, ele) => {
          return pre + ele.iNumber
        }, 0)
      } else {
        this.$message.error(res.info)
      }
      this.loading = false
    },
    // 每页显示条数变化
    sizeChange (size) {
      this.page = 1
      this.pageSize = size
      this.getList()
    },
    // 数据索引
    searchList (params) {
      /* 修改全局索引的参数为 过滤后的参数 再次获取数据 */
      console.log(params)
      params.forEach(item => {
        this[item.key] = item.val
      })
      this.page = 1
      this.getList()
    },
    // 导出
    async exportExcel () {
      const params = {
        sStartDate: this.startTiem,
        sEndDate: this.endTime
      }
      const url = '/OrderInfo/GetMachineExport'
      const filename = '机器领水统计.xlsx'
      const res = await getFile(url, params, filename)
      console.log(res)
      if (res.success) {
        this.$message.success(res.info)
      } else {
        this.$message.error(res.info)
      }
    }
  },
  components: { icard, iSearch }
}
</script>
<style lang="less">
.num-total{
  text-align: left;
  color: @themeColor;
}
</style>
